Day2：NodeJS 與 Express 4、route設定｜KeywordSearch 1.0 爬蟲關鍵字報表工具

2018 iT 邦幫忙鐵人賽

DAY 3

Software Development

[行銷也要自動化] 用 Python Selenium + NodeJS + Amazon EC2 打造簡易關鍵字搜尋報表應用！系列第 3 篇

2018鐵人賽 martech express 行銷技術控

Kyle

2017-12-18 21:25:16

3202 瀏覽

分享至

什麼是KeywordSearch 1.0 爬蟲關鍵字報表工具？
是作者近期兩周實作出來的小專案，把不同關鍵字搜尋工具的api及部分爬蟲寫在nodejs App當中，讓使用者可以一鍵拿到搜尋趨勢和相似詞組推薦。此專案尚有很大擴充空間，未來在作者自己的部落格若有進一步更新，會回來附在此處：________

為什麼要做KeywordSearch 1.0？
精闢有效的前導市調可以避免不符市場需求的產品出現，定期觀測關鍵字趨勢，是網路行銷或市場分析人員的日常；但網路資訊四散各地，市調人除了大量閱讀、蒐集、篩選判斷外，還要把資料整理過後呈現給團隊，這個過程非常需要耐心、想像力、判斷力、大把時間，能夠獨立做出完整市調非常不容易；因此作者和朋友想幫市調人員節省文書、搜尋時間，讓他們能專注在判斷、分析上。

現在進度到哪了？為什麼文章是有關nodejs？
這個工具已經開發完成，現在在測試修改中，這30天文章是想把自己的開發過程完整記錄下來。第一周的進度是初步架好NodeJS App的基底，以及在jupyter上測試爬蟲script。

昨天我們碰了一下最陽春的Nodejs和Connect來管理middleware，今天讓我們直接用Express架構KeywordSearch 1.0的基底！

安裝

先進行實作的部分，後面我在多補充一些有關Express 3和4的差別。別管昨天的陽春server了，回到上一層，並安裝Express module：

user@ubuntu:/NodeJS/yangChunServer$ cd ..
user@ubuntu:/NodeJS$ sudo npm install express-generator -g

創一個新專案（資料夾）名稱自己開心取。如果你有意想搭配後面的模板教學，記得加上 --view=ejs，不然沒加的話預設會是jade。

user@ubuntu:/NodeJS$ express YourAppName --view=ejs

跑完以後會看到你的App架構長這樣：

- bin/
----- www
- node_modules/
- public/
-------- images
-------- javascripts
-------- stylesheets
- routes/
-------- index.js
-------- users.js
- views/
------- error.ejs
------- index.ejs
- app.js
- package.json
- package-lock.json

進入資料夾，設定環境：

user@ubuntu:/NodeJS$ cd YourAppName
user@ubuntu:/NodeJS/YourAppName$ npm install

試跑一下你的App：

user@ubuntu:/NodeJS/YourAppName$ DEBUG=YourAppName:* npm start
或
user@ubuntu:/NodeJS/YourAppName$ node ./bin/www

當你看到

> YourAppName@0.0.0 start /NodeJS/YourAppName
> node ./bin/www
    YourAppName:server Listening on port 3000 +0ms

就表示成功deploy了！可以打開localhost:3000跟大大的Express標題打個招呼。

在bin資料夾中的www就是你的App的starting script，裡面大致做的事情是幫你創一個server、指定監聽哪個port等。www會再啟動app.js，app.js裡面是基本設定，如route。

route設定

在你一建好App的同時，就可以在routes資料夾裡面看到users.js，以及你也可以在app.js裡面看到這一行：app.use('/users', users);，你可以隱約的猜到，這應該是已經預設好的路由。
我們在localhost:3000後面加上/users試一下：localhost:3000/users，嗯，確實有頁面，上面就是users.js中的response訊息。如果我們把users.js的res.send裡面的('respond with a resource');隨意換成其他文字，你就會看到他出現在剛剛的/users頁面。

現在我們來加加看新的route，只要一次更新這三個地方：

route/
app.js
views/

在route/下層新增`about.js`

// about.js
var express = require('express');
var router = express.Router();

/* GET about page. */
router.get('/', function(req, res, next) {
  res.render('about', { title: 'About YourAppName' });
});

module.exports = router;

在`app.js`新增兩行

// app.js
var index = require('./routes/index');
+ var about = require('./routes/about');

app.use('/', index);
+ app.use('/about', about);

在views/下層新增`about.ejs`

其中的<%= title %>是模板變數，讓你可以在about.js的res.render設定好整組變數。
（模板部分先簡單複製index.ejs的，後面我們會詳細講模板的變化，除變數以外，還有固定模板、如何載入json等等。）

// about.ejs
<!DOCTYPE html>
<html>
  <head>
    <title><%= title %></title>
    <link rel='stylesheet' href='/stylesheets/style.css' />
  </head>
  <body>
    <h1><%= title %></h1>
  </body>
</html>

/* 補充 */